import type * as pd from '@stencil/core/testing';
import { dragElementBy, queryDeep } from '@utils/test';

/**
 * Moves a reorder item by simulating a drag event
 */
export const moveReorderItem = async (
  id: string,
  page: pd.E2EPage,
  direction: 'up' | 'down' = 'up',
  numberOfSpaces = 1,
  ...parentSelectors: string[]
) => {
  try {
    const reorderItem =
      parentSelectors && parentSelectors.length > 0
        ? await (await queryDeep(page, ...parentSelectors)).$(id)
        : await page.$(id);

    if (!reorderItem) {
      throw new Error('Reorder Item is undefined');
    }

    const boundingBox = await reorderItem.boundingBox();
    if (!boundingBox) {
      throw new Error('Reorder Item bounding box is undefined');
    }

    await dragElementBy(
      reorderItem,
      page,
      0,
      direction === 'up' ? -(boundingBox.height * numberOfSpaces) : boundingBox.height * numberOfSpaces
    );
  } catch (err) {
    throw err;
  }
};
